/*
 * Copyright (c) 2013 Eugene Kuzmenko
 *
 * Permission  is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in  the Software without restriction, including without limitation the rights
 * to  use,  copy,  modify,  merge, publish, distribute, sublicense, and/or sell
 * copies  of  the  Software,  and  to  permit  persons  to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The  above  copyright  notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE  SOFTWARE  IS  PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED,  INCLUDING  BUT  NOT  LIMITED  TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS  FOR  A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS  OR  COPYRIGHT  HOLDERS  BE  LIABLE  FOR  ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 * For more information, see <http://www.aljey.com>.
 */

//=Tab

/**
 * The tab panel tabs component. Represents a collection of clickable buttons.
 *
 * @author Eugene Kuzmenko <mail@aljey.com>
 * @class {Tabs}
 * @extends {Container}
 */
Class.define('Tabs', {

  extend: 'Container',

  /**
   * The visual styling of the tabs.
   *
   * @property {Number}
   * @default 0
   * @example
   *   0 = tabs
   *   1 = pills
   *   2 = stacked pills
   */
  style: 0,

  /**
   * The active tab index.
   *
   * @property {Number}
   */
  activeItem: null,

  /** @inheritDoc */
  slots: {
    name: 'items',
    defaults: {type: 'Tab'}
  },

  tpl: [
    '<ul class="nav nav-<%=(["tabs","pills","pills nav-stacked"])[style]%>">',
    '</ul>'
  ],

  /**
   * Changes visual styling of the tabs.
   *
   * @param {Number} val
   * @returns {Tabs}
   */
  setStyle: _static.Container.setter(function (val) {
    var styles = ['nav-tabs', 'nav-pills', 'nav-pills nav-stacked'];
    this.el.removeClass(styles[this.style]).addClass(styles[val]);
  }, 'style', 'number'),

  /**
   * Changes the active tab index.
   *
   * @param {Number} activeItem
   * @returns {Tabs}
   */
  setActiveItem: function (activeItem) {
    activeItem = _.isNumber(activeItem) ? activeItem : (this.items.indexOf ?
      this.items.indexOf(activeItem) : _.indexOf(this.items, activeItem));
    (-1 === activeItem) && (activeItem = 0);
    var newItem = this.items && this.items.get && this.items.get(activeItem);
    if (this.activeItem !== activeItem && newItem) {
      if (this.el) {
        var old = this.items.get(this.activeItem);
        old && old.el.removeClass('active');
        newItem.el.addClass('active');
      }
      this.fire('tabChange', [activeItem]);
      this.activeItem = activeItem;
    }
    return this;
  },

  listeners: {
    beforeRender: function () {
      var me = this, activeItem = me.activeItem;
      me.activeItem = null;
      me.setActiveItem(activeItem);
      me.items.on('change', function () {
        me.items.items[me.activeItem] || me.setActiveItem(me.items.first);
      });
    }
  }

});